<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝白简约系统安装向导</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background: #f5f7fa;
            padding: 20px;
        }
        .install-box {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 4px 18px rgba(22,93,255,0.1);
            overflow: hidden;
        }
        .install-top {
            background: #165DFF;
            color: #fff;
            text-align: center;
            padding: 24px;
        }
        .install-top h2 {
            font-size: 24px;
            margin-bottom: 6px;
        }
        .install-top p {
            opacity: 0.9;
            font-size: 14px;
        }
        .step-nav {
            display: flex;
            justify-content: space-around;
            padding: 25px 15px;
            border-bottom: 1px solid #eee;
        }
        .step-item {
            text-align: center;
            font-size: 13px;
            color: #999;
        }
        .step-num {
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            background: #e8f0ff;
            color: #165DFF;
            display: inline-block;
            margin-bottom: 6px;
        }
        .step-item.active .step-num {
            background: #165DFF;
            color: #fff;
        }
        .step-item.active {
            color: #165DFF;
            font-weight: 500;
        }
        .main-content {
            padding: 30px;
            min-height: 380px;
        }
        .agree-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .agree-head h3 {
            color: #333;
            font-size: 16px;
        }
        .read-percent {
            font-size: 13px;
            color: #165DFF;
            font-weight: 500;
        }
        .agree-text {
            width: 100%;
            height: 240px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 15px;
            font-size: 13px;
            line-height: 1.7;
            color: #555;
            overflow-y: auto;
            background: #f9fafb;
            resize: none;
        }
        .check-line {
            margin-top: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .check-line input {
            width: 16px;
            height: 16px;
            accent-color: #165DFF;
        }
        .form-item {
            margin-bottom: 20px;
        }
        .form-item label {
            display: block;
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
        }
        .form-item input {
            width: 100%;
            height: 42px;
            padding: 0 14px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 14px;
            outline: none;
        }
        .form-item input:focus {
            border-color: #165DFF;
        }
        .tip-text {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        .install-loading {
            text-align: center;
            padding: 60px 0;
            color: #666;
        }
        .success-icon {
            width: 66px;
            height: 66px;
            border-radius: 50%;
            background: #00b42a;
            margin: 0 auto 20px;
            position: relative;
        }
        .success-icon::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 28px;
            border: solid #fff;
            border-width: 0 4px 4px 0;
            transform: translate(-50%,-55%) rotate(45deg);
        }
        .success-info {
            background: #f0f7ff;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .success-info p {
            line-height: 2.2;
            font-size: 14px;
        }
        .success-info span {
            color: #165DFF;
            font-weight: 500;
        }
        .btn-group {
            display: flex;
            justify-content: space-between;
            padding: 22px 30px;
            border-top: 1px solid #eee;
        }
        .btn {
            padding: 11px 28px;
            border-radius: 6px;
            border: none;
            font-size: 14px;
            cursor: pointer;
        }
        .btn-pre {
            background: #f3f4f6;
            color: #666;
        }
        .btn-next {
            background: #165DFF;
            color: #fff;
        }
        .btn:disabled {
            background: #94b8f0;
            cursor: not-allowed;
        }
        .page {display: none;}
        .page.show {display: block;}
    </style>
</head>
<body>
<div class="install-box">
    <div class="install-top">
        <h2>系统安装向导</h2>
        <p>按流程完成部署，快速搭建系统环境</p>
    </div>

    <div class="step-nav">
        <div class="step-item active" data-step="1">
            <div class="step-num">1</div>
            <div>阅读协议</div>
        </div>
        <div class="step-item" data-step="2">
            <div class="step-num">2</div>
            <div>数据库配置</div>
        </div>
        <div class="step-item" data-step="3">
            <div class="step-num">3</div>
            <div>导入数据</div>
        </div>
        <div class="step-item" data-step="4">
            <div class="step-num">4</div>
            <div>站点设置</div>
        </div>
        <div class="step-item" data-step="5">
            <div class="step-num">5</div>
            <div>安装完成</div>
        </div>
    </div>

    <div class="main-content">
        <!-- 1 阅读协议 -->
        <div class="page show" id="page1">
            <div class="agree-head">
                <h3>用户许可使用协议</h3>
                <span class="read-percent" id="readPercent">阅读进度：0%</span>
            </div>
            <textarea class="agree-text" readonly id="agreeText">
欢迎使用本系统，请您仔细通读以下完整用户许可服务协议，在进行安装使用前，请务必认真阅读全部条款内容：

一、版权归属声明
1. 本系统所有程序源码、界面设计、功能模块、文档资料等全部知识产权均归项目开发团队独家所有。
2. 未经官方正式书面授权，任何单位及个人禁止进行反编译、逆向破解、源码篡改、二次打包、公开售卖、无偿分发等侵权行为。
3. 系统名称、品牌标识、专属UI元素均已受相关法律法规保护，严禁抄袭套用。

二、使用权限规范
1. 正版授权用户仅可在授权域名、授权服务器范围内正常运营使用本系统。
2. 授权分为个人版、企业版、商业多域名版，不同版本权限严格区分，不得跨权限违规使用。
3. 禁止将本系统嵌套、嫁接至其他违规平台，禁止转借、出租、转租授权使用权限。

三、用户行为准则
1. 使用者必须严格遵守中华人民共和国网络安全法、电子商务法及地方相关互联网管理条例。
2. 严禁利用本系统搭建涉黄、涉赌、诈骗、黑灰产、恶意引流、侵权盗版等违法违规站点与业务。
3. 因用户自身业务违规、内容违规所产生的一切行政处罚、民事赔偿、刑事责任均由使用者自行全权承担。

四、服务与维护说明
1. 官方仅对正版付费授权用户提供程序BUG修复、基础环境适配、基础使用答疑服务。
2. 免费版/试用版不提供任何人工技术支持，出现问题需自行排查解决。
3. 因服务器配置过低、环境缺失、人为误删文件、第三方插件冲突导致的系统故障，不在免费维护范围内。

五、数据安全与免责
1. 用户业务数据、会员数据、交易数据等全部数据由使用者自行做好定期备份，官方不承担数据丢失赔付责任。
2. 遭遇黑客攻击、服务器宕机、域名封禁、网络中断等不可抗力及外部因素造成的损失，官方不予负责。
3. 系统仅提供业务功能框架，不保障用户实际运营收益，所有经营盈亏与开发团队无关。

六、授权终止条款
1. 一经查实违规使用、多域名盗用、倒卖授权等行为，官方有权无条件永久封禁授权使用资格。
2. 授权到期未及时续费，系统将自动关闭核心使用功能，仅保留基础查看权限。
3. 用户主动放弃使用授权，已支付的授权费用不予退还。

七、协议修订规则
开发团队有权在不单独通知的前提下优化、修改本用户协议条款，协议更新后继续使用系统即代表默认接受最新协议内容。

郑重提示：请您务必滑动滚动条阅读至协议最底部，确认完整知晓所有权责条款后，方可勾选同意并进入下一步安装流程。
            </textarea>
            <div class="check-line">
                <input type="checkbox" id="agreeCheck" disabled>
                <label>我已完整阅读并同意全部用户协议</label>
            </div>
        </div>

        <!-- 2 数据库配置 -->
        <div class="page" id="page2">
            <h3 style="margin-bottom:25px;color:#333;font-size:16px">数据库连接配置</h3>
            <div class="form-item">
                <label>数据库地址</label>
                <input value="127.0.0.1" placeholder="本地默认127.0.0.1">
            </div>
            <div class="form-item">
                <label>数据库端口</label>
                <input value="3306" placeholder="默认3306">
            </div>
            <div class="form-item">
                <label>数据库用户名</label>
                <input placeholder="请填写数据库账号">
            </div>
            <div class="form-item">
                <label>数据库密码</label>
                <input type="password" placeholder="请填写数据库密码">
            </div>
            <div class="form-item">
                <label>数据库名称</label>
                <input placeholder="自定义创建好的数据库名">
            </div>
            <div class="form-item">
                <label>数据表前缀</label>
                <input value="sys_" placeholder="自定义表前缀">
                <div class="tip-text">无特殊需求建议保持默认</div>
            </div>
        </div>

        <!-- 3 导入数据 -->
        <div class="page" id="page3">
            <div class="install-loading">
                <h3 style="margin-bottom:15px">正在自动初始化数据库</h3>
                <p>正在创建数据表、写入基础配置数据...</p>
                <p style="margin-top:10px">请勿关闭或刷新当前页面</p>
            </div>
        </div>

        <!-- 4 站点管理员配置 -->
        <div class="page" id="page4">
            <h3 style="margin-bottom:25px;color:#333;font-size:16px">网站与管理员信息配置</h3>
            <div class="form-item">
                <label>网站站点名称</label>
                <input placeholder="填写你的网站/系统名称">
            </div>
            <div class="form-item">
                <label>后台访问目录</label>
                <input placeholder="例如 admin 自定义后台路径更安全">
                <div class="tip-text">设置后请牢记后台访问地址</div>
            </div>
            <div class="form-item">
                <label>超级管理员账号</label>
                <input placeholder="设置后台登录账号">
            </div>
            <div class="form-item">
                <label>管理员登录密码</label>
                <input type="password" placeholder="设置高强度登录密码">
            </div>
            <div class="form-item">
                <label>管理员绑定邮箱</label>
                <input placeholder="用于找回密码接收通知">
            </div>
        </div>

        <!-- 5 安装完成 -->
        <div class="page" id="page5">
            <div style="text-align:center">
                <div class="success-icon"></div>
                <h3 style="font-size:22px;color:#333;margin-bottom:10px">系统安装部署完成</h3>
                <p style="color:#666">请妥善保存下方管理员登录信息</p>
                <div class="success-info">
                    <p>后台登录入口：<span>/admin</span></p>
                    <p>管理员账号：<span>admin</span></p>
                    <p>登录密码：<span>123456</span></p>
                    <p>绑定邮箱：<span>admin@system.com</span></p>
                </div>
                <p style="font-size:13px;color:#999">安装完成后建议立即删除 public/install 安装目录，提升站点安全性</p>
            </div>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-pre" id="prevBtn" disabled>上一步</button>
        <button class="btn btn-next" id="nextBtn" disabled>下一步</button>
    </div>
</div>

<script>
let nowStep = 1;
const agreeText = document.getElementById('agreeText');
const agreeCheck = document.getElementById('agreeCheck');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const pages = document.querySelectorAll('.page');
const steps = document.querySelectorAll('.step-item');
const readPercent = document.getElementById('readPercent');

// 实时计算阅读百分比
function calcReadPercent(){
    let scrollTop = agreeText.scrollTop;
    let scrollHeight = agreeText.scrollHeight - agreeText.clientHeight;
    let percent = Math.floor((scrollTop / scrollHeight) * 100);
    if(isNaN(percent)) percent = 100;
    readPercent.innerText = `阅读进度：${percent}%`;
    if(percent >= 98){
        agreeCheck.disabled = false;
    }
}
agreeText.addEventListener('scroll',calcReadPercent);

// 勾选启用下一步
agreeCheck.onchange = function(){
    nextBtn.disabled = !this.checked;
}
// 切换页面
function changePage(s){
    pages.forEach(p=>p.classList.remove('show'));
    document.getElementById('page'+s).classList.add('show');
    steps.forEach(st=>st.classList.remove('active'));
    document.querySelector(`.step-item[data-step="${s}"]`).classList.add('active');
    prevBtn.disabled = s===1;
    if(s===5){
        nextBtn.style.display='none';
        prevBtn.style.display='none';
    }
}
nextBtn.onclick = ()=>{
    if(nowStep<5){
        nowStep++;
        changePage(nowStep);
        // 移除第三步禁用逻辑，全程自由点击下一步
        nextBtn.disabled=false;
    }
}
prevBtn.onclick = ()=>{
    if(nowStep>1){
        nowStep--;
        changePage(nowStep);
        nextBtn.disabled=false;
    }
}
// 初始化进度
calcReadPercent();
</script>
</body>
</html>